<template>
	<view style="height: 100vh;background-color: #fff">

		<view>
			<checkbox-group class="checkbox-group" @change="invite_friend" style="display: flex;
			flex-direction: column;justify-content: flex-start;padding-left: 20px;">
				<label class="checkbox" style="display: flex;align-items: center;" v-for="(item,index) in list" :key="index">
					<checkbox :value="item.name" class="tui-checkbox" type="checkbox" />
					<!-- {{qbsinfo[index]==item.name}} -->
					<image :src="item.img" style="width:80upx;height:80upx;border-radius:30px;margin-left: 10px;margin-right: 10px;"></image>{{item.name}}<!-- {{ item.uinfo.account }} -->
				</label>
			</checkbox-group>
		</view>

		<!-- 获取需要邀请的好友列表 -->
		<view class="friend_list">
			<view class="friend_list" v-if="qbsinfo.length!=0">
				<view style="text-align: center;">已设置抢包手</view>
				<view>
					<checkbox-group class="checkbox-group" @change="invite_friend" style="display: flex;
					flex-direction: column;justify-content: flex-start;padding-left: 20px;">
						<label class="checkbox" style="display: flex;align-items: center;" v-for="(items,indexs) in qbsinfo" :key="indexs">
							<checkbox :value="items.name" class="tui-checkbox" type="checkbox" :checked="true" />
							
							<image src="/static/images/group@2x.png" style="width:80upx;height:80upx;border-radius:30px;margin-left: 10px;margin-right: 10px;"></image>{{items.account}}<!-- {{ item.uinfo.account }} -->
						</label>
					</checkbox-group>
				</view>
			</view>

		</view>
		<!--  -->
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		computed: {
			...mapState(['newAddFriend']),
		},
		data() {
			return {
				token: '',
				qid: '',
				friendList: [], // 好友列表
				groupName: "", // 群名称
				groupDec: "", // 群简介
				allowJoin: true, // 是否允许任何人加入
				allowApprove: false, // 加入需要审批
				noAllowJoin: false, // 不允许任何人加入
				allowInvite: false, // 允许群人员邀请
				inviteFriend: [], // 需要加好友ID
				qbsList: [],
				scrollTop: 0,
				qbsinfo: [],
				list: [{
						id: "1",
						name: "抢包助手1",
						lastname: "你好",
						img: "/static/images/avatar/6.jpg",
						checked: false,
						is_where:0
					}, {
						id: "2",
						name: "抢包助手2",
						lastname: "你好",
						img: "/static/images/avatar/6.jpg",
						checked: false,
						is_where:0
					}, {
						id: "3",
						name: "抢包助手3",
						lastname: "你好",
						img: "/static/images/avatar/6.jpg",
						checked: false,
						is_where:0
					},
					{
						id: "4",
						name: "抢包助手4",
						lastname: "你好",
						img: "/static/images/avatar/6.jpg",
						checked: false,
						is_where:0
					},
					{
						id: "5",
						name: "抢包助手5",
						lastname: "你好",
						img: "/static/images/avatar/6.jpg",
						checked: false,
						is_where:0
					},
					{
						id: "6",
						name: "抢包助手6",
						lastname: "你好",
						img: "/static/images/avatar/6.jpg",
						checked: false,
						is_where:0
					},
					{
						id: "7",
						name: "抢包助手7",
						lastname: "你好",
						img: "/static/images/avatar/6.jpg",
						checked: false,
						is_where:0
					},
					{
						id: "8",
						name: "抢包助手8",
						lastname: "你好",
						img: "/static/images/avatar/6.jpg",
						checked: false,
						is_where:0
					},
					{
						id: "9",
						name: "抢包助手9",
						lastname: "你好",
						img: "/static/images/avatar/6.jpg",
						checked: false,
						is_where:0
					},
					{
						id: "10",
						name: "抢包助手10",
						lastname: "你好",
						img: "/static/images/avatar/6.jpg",
						checked: false,
						is_where:0
					},
				]
			}
		},
		onShow() {
			this.token = uni.getStorageSync("token")
			var me = this;
			// 获取当前用户的好友信息
			this.$im.conn.getRoster({
				success: function(roster) {
					console.log(roster)
					var member = [];
					for (let i = 0; i < roster.length; i++) {
						if (roster[i].subscription == "both") {
							member.push(roster[i]);
						}
					}
					// me.friendList = member
				}
			});
			me.friendList = this.newAddFriend;
			// 获取好友列表
			uni.request({
				url: this.G_base + '/api/lz/hlist',
				method: 'POST',
				header: {
					'content-type': 'application/x-www-form-urlencoded',
					'Authori-zation': 'Bearer ' + this.token
				},
				success: res => {
					console.log(res)
					me.friendList = res.data.data
				}
			})
			
			this.list.forEach(item,index=>{
				console.log(item.name) 
			})
			// console.log(one)
		},
		onLoad(options) {
			this.qid = options.qid
			this.getqbs();
		},
		onNavigationBarButtonTap(e) {
			console.log(e)
			if (e.float == "right") {
				uni.request({
					url: this.G_base + '/api/lz/qqbs',
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						'Authori-zation': 'Bearer ' + this.token
					},
					data: {
						id: this.qid,
						jltxt: this.friendList,
						status: 2
					},
					success: res => {
						console.log(res)
						if (res.data.status == 200) {
							uni.showToast({
								title: '设置成功'
							})
							this.getqbs();
						} else {
							uni.showToast({
								title: '请设置'
							})

						}
						console.log("禁枪埋雷抢包手")
					}
				})
			}
		},
		methods: {
			...mapMutations(['setNewAddFriend']),
			invite_friend(e) {
				console.log(e.detail.value)
				let arr = []
				for (let i = 1; i <= e.detail.value.length; i++) {
					// console.log(e.detail.value[i-1]+":"+i)
					arr.push(e.detail.value[i - 1] + ":" + i)
				}
				this.friendList = arr
				console.log(this.friendList)
				
				// let ysIndex = this.qbsinfo.indexOf(e.detail.value);
				// if (ysIndex == -1) {
				// 	console.log('勾上')
				//    // this.selproductList.push(itm)
				//   } else {
				// 	  console.log('删掉')
				//    // this.selproductList.splice(ysIndex, 1)
				//   }
				
				
			},
			test() {
				uni.navigateBack({
					delta: 1
				})
			},

			getqbs() {
				uni.request({
					url: this.G_base + '/api/lz/qqbsdq',
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						'Authori-zation': 'Bearer ' + this.token
					},
					data: {
						id: this.qid,
					},
					success: res => {
						console.log(res)
						this.qbsinfo = res.data.data
						console.log("获取抢包手信息")
					}
				})
			},
			check(index, checked) {
				if (checked == true) {
					this.list[index].checked = false
				} else if (checked == false) {
					this.list[index].checked = true
				}
			},
			onPageScroll(e) {
				this.scrollTop = e.scrollTop;
			}
		}
	}
</script>

<style scoped>
	.zhuli {
		margin: 0 20px;
		display: flex;

	}

	.example-box {
		display: flex;
		justify-content: flex-end;
	}

	uni-radio {
		line-height: 68px;
	}

	.checkbox {
		margin: 10px 0;

	}
</style>
